import React from 'react';
import { Form, Card, Button } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { useRequest, defaultFormatResult } from '@/hooks';
import { history } from 'umi'
import LabelValue from '@/components/LabelValue';
import { TemplateEditor } from '@/pages/TurnoverSetting/EntrySetting/components';
import { getLeavingProveDetail } from '../services';
import styles from './index.less';

const DemissionCertDetail = ({ location }) => {
    const { query } = location;
    const { id } = query;
    const { data, loading } = useRequest(() => getLeavingProveDetail(id), {
        refreshDeps: [id],
        ...defaultFormatResult
    });
    const insertParamList = [];
    return (
        <PageHeaderWrapper>
            <Card
                title="离职模板详情"
                bordered={false}
                loading={loading}
                extra={
                    (
                        <Button
                            type="primary"
                            onClick={() => {
                                history.push({
                                    pathname: '/office/personnelManagement/onboardAndLeave/setting/leaveSetting/demissionCertSetting/edit',
                                    query: { id }
                                });
                            }}
                        >
                            编辑
                        </Button>
                    )
                }
            >
                <Form className={styles.noticeTemplateDetailWrap}>
                    <LabelValue
                        label="模板名称"
                        value={data?.templateName}
                        align="top"
                        labelClassName={styles.labelClass}
                        valueClassName={styles.valueClass}
                    />
                    <LabelValue
                        align="top"
                        labelClassName={styles.labelClass}
                        valueClassName={styles.valueClass}
                        label="适用行政机构"
                        value={data?.hasDefault ? '全集团' : data?.companyNameList?.join('、')}
                    />
                    <LabelValue
                        align="top"
                        labelClassName={styles.labelClass}
                        valueClassName={styles.valueClass}
                        label="模板正文"
                        value={() => (
                            <TemplateEditor
                                initialValue={data?.templateContent || ''}
                                contentStyle={{ height: 'auto', minHeight: 250 }}
                                insertParamList={insertParamList} // 要参数的参数由外部引入
                                readOnly
                            />
                        )}
                    />
                </Form>
            </Card>
        </PageHeaderWrapper>
    );
};

export default React.memo(DemissionCertDetail);
